<template>
  <div class="app-container">
    <!-- 条件框 -->
    <el-row>
        <el-col :span="4">
            <el-input @clear="search"  placeholder="请输入行业名称" v-model="PageDto.name" clearable> </el-input>
        </el-col>
        <el-col :span="2">
            <el-button @click="PageDto.now=1;search()" type="success" icon="el-icon-search">搜索</el-button>
        </el-col>
         <el-col :span="2">
            <el-button @click="clearSearch" type="danger" icon="el-icon-delete">清空</el-button>
        </el-col>
         <el-col :span="2" offset="14">
            <el-button  @click="add" type="primary" icon="el-icon-circle-plus">新增</el-button>
        </el-col>
    </el-row>
    
    <el-table :data="List" style="width: 100%" max-height="550" stripe>
      <el-table-column prop="name" label="行业名称" align="center"/> 
      <el-table-column prop="createTime" label="创建日期" align="center"/>
      <el-table-column  label="操作"> 
        <template slot-scope="scope">
          <a @click.prevent="edit(scope.row.id,scope.row.name)" style="color: blue;">
            编辑
          </a>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="PageDto.now"
      layout="total,prev, pager, next, jumper"
      :total="total"
    >
    <!-- 编辑对话框 -->
  </el-pagination>
  <el-dialog title="编辑行业" :visible.sync="dialogFormVisible" @closed="clearData">
    <el-form :model="1">
      <el-form-item label="行业名称" :label-width="formLabelWidth">
        <el-input v-model="industry.name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false;saveEdit()">保 存</el-button>
  </div>
  </el-dialog>
  <!-- 新增对话框 -->
  <el-dialog title="新增行业" :visible.sync="dialogFormVisible1" @closed="clearData">
    <el-form :model="form">
      <el-form-item label="行业名称" :label-width="formLabelWidth">
        <el-input v-model="industry.name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible1 = false;saveAdd()">添 加</el-button>
  </div>
  </el-dialog>
  </div>
</template>
<script>
//导入dept api
import { page,add,edit} from "@/api/industry";
//导入pcd组件
// import PCD  from '../components/pcd.vue';
export default {
  components: {
    // // PCD:PCD
    // PCD
  },
  data() {
    return {
      List: [],
      industry:{
        id:"",
        name:"",
      },
      PageDto: {
        now: 1,
        size: 10,
        name:"",
      },
      pages: 0,
      total: 0,
      dialogFormVisible:false,
      dialogFormVisible1:false,
    };
  },
  methods: {
    handleCurrentChange(now) {
      this.PageDto.now = now;
      this.search();
    },
    search() {
      page(this.PageDto).then((res) => {        
        this.List = res.list;
        this.pages = res.pages;
        this.total = res.total;
      });
    },
    clearSearch(){
      this.PageDto.name = ""
      this.search()
    },
    edit(industryId,industryName){
      this.industry.id = industryId
      this.industry.name = industryName
      this.dialogFormVisible = true
    },
    saveEdit(){
      edit(this.industry).then(res=>{
        this.search()
        this.$message.success(res.message)
      })
    },
    add(){
      this.dialogFormVisible1 = true
    },
    saveAdd(){
      add(this.industry).then(res=>{
        if(res.ok){
          this.search()
          this.$message.success(res.message)
        }else{
          this.$message.error(res.message)
        }
      })
    },
    clearData(){
      this.industry.id = ""
      this.industry.name = ""
    }
  },
  created() {
    this.search();
  },
};
</script>

<style>
</style>